<template>
  <div style="padding:30px;">
    <Breadcrumb />
    <el-card style="margin-top:15px;">
      <div style="margin: 15px 0;">
        <el-input
          v-model="orderList.query"
          style="width:33%;"
          :clearable="true"
          placeholder="请输入内容"
          class="input-with-select"
          @clear="empty"
        >
          <el-button slot="append" icon="el-icon-search" @click="querys" />
        </el-input>
      </div>
      <el-table
        :data="orderData"
        style="width: 100%"
        border
      >
        <el-table-column
          type="index"
          label="#"
          width="50"
        />
        <el-table-column
          prop="order_number"
          label="订单编号"
          width="220"
        />
        <el-table-column
          prop="order_price"
          label="订单价格"
        />
        <el-table-column
          label="是否付款"
        >
          <template slot-scope="{ row }">
            <el-tag :type="row.pay_status -0?'success':'danger'">
              {{ row.pay_status -0?'已付款':'未付款' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="is_send"
          label="是否发货"
        />
        <el-table-column
          prop="create_time"
          label="下单时间"
        >
          <template slot-scope="{ row }">
            {{ row.create_time | formatTime }}
          </template>
        </el-table-column>
        <el-table-column
          prop="order_number"
          label="操作"
        />
      </el-table>
      <el-pagination
        style="margin-top:20px;"
        :current-page="orderList.pagenum"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="orderList.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import { getOrderList } from '@/api/order.js'

export default {
  name: 'Order',
  data() {
    return {
      orderList: {
        query: '',
        pagenum: 1,
        pagesize: 5,
        user_id: '',
        pay_status: '',
        is_send: '',
        order_fapiao_title: [],
        order_fapiao_company: '',
        order_fapiao_content: '',
        consignee_addr: ''
      },
      orderData: [],
      total: 0

    }
  },

  created() {
    this.loadOrderList()
  },

  methods: {
    async loadOrderList() {
      const res = await getOrderList(this.orderList)
      console.log(res)
      this.orderData = res.goods
      this.total = res.total
    },
    empty() {
      this.loadOrderList()
    },
    querys() {
      this.loadOrderList()
    },
    handleSizeChange(val) {
      this.orderList.pagesize = val
      this.loadOrderList()
    },
    handleCurrentChange(val) {
      this.orderList.pagenum = val
      this.loadOrderList()
    }
  }
}
</script>

<style scoped lang='less'>

</style>

